<template>
	<div class="content">
		<el-tabs :tab-position="tabPosition" class="content-taber">
			<el-tab-pane label="订单">
				<el-form ref="orderMess" :model="orderMess" label-width="80px">
					<el-row :gutter="10">
						<el-col :span="8">
							<el-form-item label="订单号">
								<el-input v-model="orderMess.order_number" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="金额(元)">
								<el-input v-model="orderMess.goods_price" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="当前状态">
								<el-input v-model="orderMess.status_name" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="下单时间">
								<el-input v-model="orderMess.create_time" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="支付时间">
								<el-input v-model="orderMess.pay_time" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="发货时间">
								<el-input v-model="orderMess.deliver_time" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="收货时间">
								<el-input v-model="orderMess.confirm_time" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="联系人">
								<el-input v-model="orderMess.consignee" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系电话">
								<el-input v-model="orderMess.tel" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="收货地址">
								<el-input v-model="orderMess.address" readonly="readonly"></el-input>
							</el-form-item>
						</el-col>

					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="商品">
				<template>
					<el-table :data="orderMess.goods_info" stripe style="width: 100%">
						<el-table-column prop="id" label="ID" width="100" align="center">
						</el-table-column>
						<el-table-column prop="pic" label="标题图片" width="200" align="center">
							<template slot-scope="scope">
								<img :src="scope.row.pic" width="50" height="50" class="head_pic" align="center" />
							</template>
						</el-table-column>
						<el-table-column prop="title" label="商品名称" width="300" align="center">
						</el-table-column>
						<el-table-column prop="fee" label="单价(元)" align="center" width="180" :formatter="editMoney">
						</el-table-column>
						<el-table-column prop="num" label="数量(台)" align="center" width="180">
						</el-table-column>
					</el-table>
				</template>

			</el-tab-pane>

			<el-tab-pane label="物流">
				<div v-if="step" style="margin: 20px;">
					<el-form ref="orderMess" :model="orderMess" label-width="80px">
						<el-row :gutter="20">
							<el-col :span="20">
								<el-form-item label="快递单号">
									<el-input v-model="orderMess.express_number" readonly="readonly"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="20">
								<el-form-item label="快递公司">
									<el-input v-model="company" readonly="readonly"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!--物流状态-->
				<div class="" v-if="infoShow==true">
					<el-steps direction="vertical" :active="step" finish-status="success">
						<el-step v-for="(item,index) in context" :key="index" :title="item.time" :description="item.desc"></el-step>
					</el-steps>
				</div>

			</el-tab-pane>
			<el-tab-pane label="操作">
				<div v-if="orderMess.status==2">
					<el-button type="primary" :loading="delLoad" @click="deliver_goods">发货</el-button>
				</div>
			</el-tab-pane>
		</el-tabs>

	</div>
</template>
<script>
	export default {
		name: '',
		data() {
			return {
				delLoad: false,
				infoShow: false,
				step: 1, //物流内容
				tabPosition: 'left',
				orderMess: {}, //订单信息
				company: "", //快递公司
				context: "", //物流状态
				express_number: "", //快递单号
			}
		},
		mounted: function() {
			var that = this;
			that.getParams();
			console.log(this.orderMess);
		},
		methods: {
			openHint(msg, type) {
				this.$message({
					message: msg,
					type: type
				})
			},
			// 取到路由带过来的参数 
			getParams() {
				var row = this.$route.params.row;
				this.orderMess = row;
				var mess = this.orderMess;
				mess.goods_price = row.goods_price / 100;
				if(row.express_info !== undefined) {
					console.log(mess.express_info.context);
					this.infoShow = true;
					this.company = mess.express_info.company;
					this.context = mess.express_info.context;
					this.step = mess.express_info.context.length;
					console.log(this.context);
				}
				if(mess.express_number == "") {
					mess.express_number = "-- --"
				}
				if(this.company == "") {
					this.company = "-- --"
				}
				if(mess.pay_time === "0000-00-00 00:00:00") {
					mess.pay_time = "-- --"
				}
				if(mess.deliver_time === "0000-00-00 00:00:00") {
					mess.deliver_time = "-- --"
				}
				if(mess.confirm_time === "0000-00-00 00:00:00") {
					mess.confirm_time = "-- --"
				}
				console.log(row);
			},
			// 发货
			deliver_goods: function() {
				var that = this;
				this.delLoad = true;
				this.$prompt('请输入快递单号!', '订单发货', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(function({value}) {
					that.openHint('你的快递单号是: ' + value, "success");
					that.deliverPost(value);
				}).catch(function() {
					that.delLoad = false;
					that.openHint("取消输入", "info");
				});
			},
			//提交发货
			deliverPost: function(expNumber) {
				var that = this;
				this.$axios.post('/shop/deliver_order', {
						id: this.orderMess.id,
						express_number:expNumber
					})
					.then(function(res) {
						console.log(res);
						if(res.data.code == 0) {
						   that.openHint("发货成功", "success");
						   that.delLoad = false;
						}
					}).catch(function(error) {
						//console.log(error);
					});
			},
			//售价
			editMoney: function(row, column) {
				return row.fee / 100
			},
            //发货数据
			editStatus: function(row, column) {
				return row.status == 1 ? '已上架' : row.status == 0 ? '已下架' : '未知';
			},
		}

	}
</script>

<style scoped="scoped">
	.row-border {
		border-top: 1px solid #eee;
	}
	
	.grid-content {
		text-align: left;
		line-height: 40px !important;
	}
	
	.el-collapse {
		/* padding-bottom:10px !important;*/
		border-bottom: 0;
	}
	
	.content-taber {
		margin-top: 20px;
	}
	
	.el-table .warning-row {
		background: oldlace;
	}
	
	.el-table .success-row {
		background: #f0f9eb;
	}
</style>